<template>
	<satri-topbar title="Topbar 顶部导航栏" description="小标题"></satri-topbar>

	<satri-page :padding="20">
		<satri-card label="基础用法">
			<satri-topbar title="Topbar 顶部导航栏"></satri-topbar>
		</satri-card>

		<satri-card label="带描述">
			<satri-topbar title="Topbar 顶部导航栏" description="兼容多端"></satri-topbar>
		</satri-card>

		<satri-card label="自定义">
			<satri-topbar title="标题">
				<template #append>
					<view class="satri-topbar__icon" @tap="toToast">
						<text class="satri-icon-warning-border"></text>
					</view>
				</template>
			</satri-topbar>
		</satri-card>

		<satri-card label="不需要返回键">
			<satri-topbar title="标题" :show-back="false"></satri-topbar>
		</satri-card>

		<satri-card label="其他颜色">
			<satri-topbar title="标题" color="#fff" background-color="#000"></satri-topbar>
		</satri-card>
	</satri-page>
</template>

<script setup lang="ts">
import { useUi } from "/$/satri-ui";

const ui = useUi();

function toToast() {
	ui.showTips("Satri-uni");
}
</script>
